1 00:00:00,660 --> 00:00:01,100 Hello. 2 00:00:01,110 --> 00:00:02,810 Welcome to the third shop. 3 00:00:03,180 --> 00:00:10,860 In this show we are going to be styling how app using C Ss. 4 00:00:10,970 --> 00:00:16,840 I am in the C Ss part of my text editor. 5 00:00:17,220 --> 00:00:28,110 And so this is where I'm going to be adding the C Ss stylin for the app in order to apply style mean 6 00:00:28,150 --> 00:00:34,470 to Amy hastier male element you more have a select on. 7 00:00:34,500 --> 00:00:38,920 This selektah is the item you want to apply styling to. 8 00:00:39,350 --> 00:00:46,770 Once you detect these select tell you that you now have to define the property that is what you want 9 00:00:46,770 --> 00:00:50,460 to style and then you give the property value. 10 00:00:50,850 --> 00:00:56,780 So in this case the what I am targeting here is this idea wrapper. 11 00:00:57,090 --> 00:01:03,900 If I open my hate mail here far we've got the dethier Witten I.D. of rubber so that's what we're going 12 00:01:03,900 --> 00:01:06,650 to tag it in this year says. 13 00:01:06,660 --> 00:01:08,170 So that's this. 14 00:01:08,490 --> 00:01:10,700 So the properties have assigned to it. 15 00:01:10,710 --> 00:01:18,510 And are these one the margene to be able to automate it or send to the div in the middle of the page 16 00:01:18,600 --> 00:01:27,320 that is sent out or corners so it does that automatically with the ease we've given it. 17 00:01:27,360 --> 00:01:35,200 The height is the height background call or is this how we use Hexa decimal values for the background 18 00:01:35,200 --> 00:01:35,910 colour. 19 00:01:36,240 --> 00:01:41,820 If you know the names of the colours you're trying to use you can always specify them rather than use 20 00:01:41,820 --> 00:01:43,430 the Hexa decimal. 21 00:01:43,440 --> 00:01:48,150 It's up to you but I like you since the hexadecimal is a lot easier. 22 00:01:48,420 --> 00:01:53,900 So if you want to know more by the hex scofflaws just do a google search on hex colours. 23 00:01:54,130 --> 00:01:58,460 It would give you various websites and you can just pick one. 24 00:01:58,560 --> 00:02:05,960 So that's the violin and then figure out where your style you more spend all your values with a semicolon. 25 00:02:05,950 --> 00:02:14,490 If not stylin will not be applied and this time in place between these curly braces the left hand that 26 00:02:14,490 --> 00:02:15,390 is right. 27 00:02:15,480 --> 00:02:23,910 Okay so you call on was separate the property from the value. 28 00:02:23,910 --> 00:02:26,920 Here is the Selecta. 29 00:02:29,730 --> 00:02:42,720 K I have I some more styling from Line 9 till line 21 so the Heidi I am targeting in this case is the 30 00:02:43,470 --> 00:02:52,380 change caller I.D. So if I go right on my hastier mail you can see I've given this input here have given 31 00:02:52,380 --> 00:02:53,540 it an idea. 32 00:02:53,550 --> 00:02:55,110 This is a button. 33 00:02:55,130 --> 00:03:02,690 Giving it an idea of change kolok so that is the Select Tool I am targeting for with the C sets. 34 00:03:02,700 --> 00:03:07,270 So this is my select top which is a side here. 35 00:03:07,920 --> 00:03:15,090 These are the properties in blue and then in between the properties you got the call on the values is 36 00:03:15,090 --> 00:03:15,990 this the wave. 37 00:03:16,000 --> 00:03:21,590 Again how wide a want that input to be is to 60 pixels. 38 00:03:21,610 --> 00:03:24,680 That's the height 80 pixels and so on. 39 00:03:24,720 --> 00:03:30,510 So make sure you can play around with these values and see what values you like. 40 00:03:30,510 --> 00:03:34,240 You don't necessarily have to stick with my values. 41 00:03:34,470 --> 00:03:37,270 Just play around and see what you like. 42 00:03:37,440 --> 00:03:41,780 Padding refers to the space inside the element. 43 00:03:41,820 --> 00:03:45,950 In this case we're talking about the space inside the input box. 44 00:03:46,090 --> 00:03:46,720 All right. 45 00:03:46,740 --> 00:03:47,930 Body radios. 46 00:03:47,940 --> 00:03:52,560 Inside this is a button sorry we're talking about the space inside the button. 47 00:03:52,690 --> 00:04:00,870 Then when you are applying parred padding or margin there are four corners you need to play to and you 48 00:04:00,870 --> 00:04:07,480 need to do it in the order of top right bottom left whereby you use both. 49 00:04:07,480 --> 00:04:12,280 If you can specify each pixel value for each of the corners. 50 00:04:12,410 --> 00:04:18,020 If you feel is better find one value it will be applied to all four corners in the order. 51 00:04:18,060 --> 00:04:19,020 Just specify. 52 00:04:19,080 --> 00:04:21,990 Top right bottom left. 53 00:04:21,990 --> 00:04:27,020 The way I remember this is by using the word trouble. 54 00:04:27,310 --> 00:04:34,050 And if you take out the vowels which are the awls from the trouble you are left with T for truck T for 55 00:04:34,050 --> 00:04:36,110 top 4 right. 56 00:04:36,140 --> 00:04:38,870 B for bottom left. 57 00:04:38,910 --> 00:04:41,410 That's how I remember it. 58 00:04:41,530 --> 00:04:48,630 Moderate yours makes give the bottom a bit of it around the corner by the last hour means I don't want 59 00:04:48,720 --> 00:04:52,780 any shading any shadow around the bottom. 60 00:04:53,070 --> 00:05:01,180 This is how you write a comment in here says who burst large asterisks and then say again comments how 61 00:05:01,190 --> 00:05:05,390 quite useful you can use them for troubleshooting purposes. 62 00:05:05,400 --> 00:05:11,130 If you don't want setting your code to be displayed so any way you have this comment ways greyed out 63 00:05:11,640 --> 00:05:14,410 that code will not be displayed. 64 00:05:14,730 --> 00:05:24,000 Again background call or use hex decimal values the font size then given it 20 pixels font refers to 65 00:05:24,000 --> 00:05:36,490 a D text size margin 60 pixels in the margin where you specify a margin or padding you can specify save 66 00:05:36,510 --> 00:05:38,800 from the top or from the left. 67 00:05:38,850 --> 00:05:45,570 If you don't specify that then it is assumed that the padding will be applied to all the four corners. 68 00:05:45,830 --> 00:05:51,540 Where on line 18 I have specified that I want. 69 00:05:52,040 --> 00:06:03,330 There are one sixty one the top of the of the element to drop down 60 pixels from the top and also from 70 00:06:03,330 --> 00:06:03,920 the left. 71 00:06:03,950 --> 00:06:07,800 I wanted to move forward and read and 70 pixels. 72 00:06:07,990 --> 00:06:09,800 And I give him the colour of white. 73 00:06:09,820 --> 00:06:19,420 This column here refers to any text that will be rendered inside this input will be white. 74 00:06:19,500 --> 00:06:26,700 I have added another set top which is the hey one tag on line twenty three. 75 00:06:26,700 --> 00:06:37,710 So line 23 to 29 are the stiring for the H on limit so whereby you are not using D class you can use 76 00:06:37,770 --> 00:06:41,310 the elements name as this selector. 77 00:06:41,340 --> 00:06:44,490 So in this case I'm using the hate one as a selector. 78 00:06:44,660 --> 00:06:53,910 So the stallion I'm defining here will be a play to any Each one element tagged on that page so the 79 00:06:53,910 --> 00:06:57,520 texts are want that was survey on line 25. 80 00:06:57,800 --> 00:07:02,360 How one did text any text entered to be aligned to be. 81 00:07:02,430 --> 00:07:07,950 To dissent and that is how one is positioned in the centre padding said. 82 00:07:08,070 --> 00:07:11,820 The padding from the top that is this space from the top. 83 00:07:11,910 --> 00:07:14,710 I want to move down to create a space. 84 00:07:14,790 --> 00:07:18,500 Andre there are 45 pixels from the top. 85 00:07:18,630 --> 00:07:27,310 Also give me a call on 27 line 27 coal on white so this is a hex value for white. 86 00:07:27,510 --> 00:07:30,060 LA refroze to this text. 87 00:07:30,300 --> 00:07:30,650 Okay. 88 00:07:30,660 --> 00:07:34,800 So any attempt will be white collar. 89 00:07:34,980 --> 00:07:37,660 That's what this column means for the hainje one tag. 90 00:07:37,950 --> 00:07:42,850 So if I say that and that's our lifestyle incomplete. 91 00:07:44,220 --> 00:07:44,750 Okay. 92 00:07:44,760 --> 00:07:46,410 Now the page has been saved. 93 00:07:46,430 --> 00:07:50,450 Fire refresh those issues see this stylin appear. 94 00:07:50,450 --> 00:07:56,760 All right so now we have style page so this is what it looks like now it's looking a bit prettier. 95 00:07:57,000 --> 00:07:58,110 But nothing will happen. 96 00:07:58,110 --> 00:08:04,880 In fact there's not going to happen because I have not implemented the javascript part of it yet. 97 00:08:05,100 --> 00:08:11,370 So then I do that in the next lecture using a query which is a javascript library. 98 00:08:11,640 --> 00:08:13,230 Thank you so much for watching. 99 00:08:13,230 --> 00:08:14,070 Take care. 100 00:08:14,070 --> 00:08:15,360 Bye for now.